<template>
    <el-card>
        <div>
            <el-button type="primary" size="small" class="addBtn" @click="adddialogVisible=true"><i class="el-icon-plus"></i> 新增数据源
            </el-button>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    height="550"
                    border
                    style="width: 100%"
                    :cell-style="{'text-align' :'center'}"
                    :header-cell-style="{'text-align' :'center'}">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="数据源名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="url"
                       >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="220">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        width="220">
                    <template slot-scope="scope">
                        <el-link type="primary" class="btn" icon="el-icon-edit" @click="editDataSuorce(scope.row)">编辑
                        </el-link>
                        <el-link type="danger" class="btn" @click="removeDataSource(scope.row)" icon="el-icon-delete">
                            删除
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :total="pagingData.total"
                    background
                    layout="total,sizes, prev, pager, next"
                    :page-size="pagingData.size"
                    :page-sizes="[1, 5, 10, 20, 30, 50]"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagingData.current"
            ></el-pagination>
        </div>
        <el-dialog
                title="新增数据源"
                :visible.sync="adddialogVisible"
                width="776px"
                :before-close="handleClose">

            <div class="add_user_box">
                <div class="add_user_cont">
                    <div class="add_card">
                        <el-form :model="dataSourceForm"
                                 ref="addUser"
                                 label-width="100px"
                                 status-icon
                        >
                            <el-form-item label="数据源名称" prop="renMingCheng">
                                <el-input v-model="dataSourceForm.name" placeholder="请输入数据源名称"></el-input>
                            </el-form-item>
                            <el-form-item label="jdbcUrl" prop="renBianHao">
                                <el-input v-model="dataSourceForm.url" placeholder="请输入jdbcUrl"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名" prop="sheBeiYanZhengMiMa">
                                <el-input v-model="dataSourceForm.username" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="kaHao">
                                <el-input v-model="dataSourceForm.password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                              <el-button size="mini" type="primary" @click="addDataSource">确 定</el-button>
                              <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>

                            </span>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
                title="修改数据源"
                :visible.sync="editDialogVisible"
                width="60%"
                :before-close="handleClose">
            <el-form label-position="left" :model="dataSourceForm" label-width="100px" size="small">
                <el-form-item label="数据源名称">
                    <el-input v-model="dataSourceForm.name"></el-input>
                </el-form-item>
                <el-form-item label="jdbcUrl">
                    <el-input v-model="dataSourceForm.url"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="dataSourceForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="dataSourceForm.password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="updateDataSource">确 定</el-button>
          </span>
        </el-dialog>
    </el-card>

</template>

<script>
    import {
        findAllDataSource,
        addDataSource,
        deleteDataSource,
        updateDataSource
    } from "../../../api/admin/gencode/dataSource";
    import {findUserPage} from "../../../api/admin/permissions/user";

    export default {
        name: 'dataSource',
        data() {
            return {
                pagingData: {
                    current: 1,
                    size: 20,
                    total: 0
                },
                adddialogVisible: false,
                editDialogVisible: false,
                dataSourceForm: {
                    //数据源名称
                    name: '',
                    //jdbcUrl
                    url: '',
                    //用户名
                    username: '',
                    //密码
                    password: ''
                },
                tableData: [],
                editData: {},
                searchData: {}
            }
        },
        created() {
            this.init();
        },
        methods: {
            /**
             * 初始化/更新
             */
            init() {
                let search = {
                    ...this.searchData,
                    // total: this.pagingData.total,
                    size: this.pagingData.size,
                    current: this.pagingData.current,
                }
                findAllDataSource(search).then((res) => {
                    this.pagingData.total = res.data.data.total
                    this.pagingData.size = res.data.data.size
                    this.pagingData.current = res.data.data.current
                    this.tableData = res.data.data.records

                })
            },
            handleClose(done) {
                done();
            }, addData() {
                this.dialogVisible = true;
            },
            addDataSource() {
                addDataSource(this.dataSourceForm).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('添加数据源成功')
                        this.init();
                        this.adddialogVisible = false;
                    } else {
                        this.$message.error('添加数据源失败')
                        this.adddialogVisible = false;
                    }
                })
                this.dataSourceForm = {}
            },
            removeDataSource(row) {
                deleteDataSource(row.id).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('删除数据源成功')
                        this.init();
                    } else {
                        this.$message.error('删除数据源失败')
                    }
                })

            },
            editDataSuorce(row) {
                this.dataSourceForm = row
                this.editDialogVisible = true;
            },
            updateDataSource() {
                updateDataSource(this.dataSourceForm).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('修改数据源成功')
                        this.init();
                        this.editDialogVisible = false;
                    } else {
                        this.$message.error('修改数据源失败')
                        this.editDialogVisible = false;
                    }
                })
            },
            // 页码切换
            handleSizeChange(val) {
                this.pagingData.size = val
                this.init()
            },
            // 当前页切换
            handleCurrentChange(val) {
                this.pagingData.current = val
                this.init()
            },
        }

    }

</script>

<style lang="scss" scoped>
    @import "~@/style/admin/gencode/dataSource.scss";

    a.btn {
        margin: 0 5px;
    }
</style>
